<template>
	<view class="container">
		<view class="naming_back">
			<image :src="url+'/static/imgs/naming.png'"></image>
			<view class="naming_sizename">上任冠名人</view>
			<text class="naming_state overflow">{{lastNamingInfo.member_info.nickname||'无'}}</text>
			<text class="naming_price" v-if="lastNamingInfo.price">￥{{lastNamingInfo.price}}</text>
		</view>
		<!--start 冠名菜谱 -->
		<view class="namingMenu">
			<view class="namingMenu_title">冠名菜品</view><strong></strong>
			<view class="namingshop row">
				<image :src="goodsInfo.image" mode="aspectFill"></image>
				<view class="namingshop_chone">
					<view class="overflow-row">{{goodsInfo.name}}</view>
					<text>¥{{goodsInfo.goods_price}}</text>
				</view>
			</view>
		</view>
		<!--end 冠名菜谱 -->
		<view class="namingInfo">
			<form @submit="formSubmit" @reset="formReset">
				<!-- start  冠名信息 -->
				<view class="naminginfo_title">填写冠名信息</view>
				<input placeholder="请输入冠名名称" type="text" name="name" maxlength="5"/>
				<input placeholder="请输入冠名内容" type="text" name="title" />
				<!-- end  冠名信息 -->
				<!--start 填写冠名金额-->
				<view class="naminginfo_title">填写冠名金额<text>（本菜品冠名金额不能小于{{lastNamingInfo.price||0.1}}元）</text></view>
				<input placeholder="只能输入到小数点后两位数" type="digit" name="price" />
				<!--end 填写冠名金额-->
				<view class="uni-btn-v">
					<button form-type="submit">确认支付</button>
				</view>
			</form>
			<view class="remarks">备注：冠名有效期为7天，7天之内，有出价高 者可夺此冠名，无人夺冠名，则您可拥有对本店该菜 品7天的冠名。</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	export default {
		data() {
			return {
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				goods_id: 0,
				goodsInfo: {},
				lastNamingInfo: {}, //上次冠名信息
			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id;
			this._load();
		},

		methods: {
			_load() {
				var that = this;
				that.getGoodsInfo();
				that.getLastNamingInfo();
			},
			getGoodsInfo() {
				var that = this;
				http.post('/api/v1/goods/goods_detail', {
					goods_id: that.goods_id,
					store_id: that.store_id
				}, res => {
					that.goodsInfo = res.datas;
				});
			},
			//获取上个冠名人
			getLastNamingInfo() {
				var that = this;
				http.post('/api/v1/goods/get_last_goods_naming', {
					goods_id: that.goods_id,
					store_id: that.store_id,
				}, (res) => {
					that.lastNamingInfo = res.datas;
				});
			},
			verify(formdata) {
				var that = this;
				console.log(formdata)
				var price = that.lastNamingInfo ? Number(that.lastNamingInfo.price) : 0.1;
				if (!formdata.name) {
					wx.showToast({
						title: '请输入冠名名称~',
						icon: 'none'
					});
					return false;
				} else if (!formdata.title) {
					wx.showToast({
						title: '请输入冠名内容~',
						icon: 'none'
					});
					return false;
				} else if (!formdata.price) {
					wx.showToast({
						title: '请输入冠名金额~',
						icon: 'none'
					});
					return false;
				}


				if (formdata.price < price) {
					wx.showToast({
						title: '冠名金额最低为' + price + '元',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			formSubmit(e) {
				var that = this;
				var formdata = e.detail.value;
				if (!that.verify(formdata)) return;
				http.post('/api/v1/goods/make_goods_naming', {
					...formdata,
					goods_id: that.goods_id,
					store_id: that.store_id,
				}, res => {
					if (res.state == 1) {
						uni.getProvider({
							service: 'oauth',
							success: function(providerRes) {
								if (~providerRes.provider.indexOf("weixin")) {
									uni.requestPayment({
										provider: "weixin",
										timeStamp: res.datas.timeStamp,
										nonceStr: res.datas.nonceStr,
										package: res.datas.package,
										signType: res.datas.signType,
										paySign: res.datas.paySign,
										success: function() {
											uni.navigateTo({
												url: "/pages/store/naming/result/result?goods_id=" + that.goods_id
											});
										}
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.datas,
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style>
	.naming_back {
		background-size: cover;
		width: 100%;
		height: 239rpx;
		position: relative;
		margin-top: 14rpx;
		color: #fff;
	}

	.naming_back image {
		width: 100%;
		height: 239rpx;
	}

	.naming_sizename {
		font-size: 30rpx;
		position: absolute;
		top: 42rpx;
		left: 38rpx;
	}

	.naming_state {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-shadow: 0px 4rpx 5rpx rgba(255, 163, 7, 0.4);
		position: absolute;
		top: 103rpx;
		left:41rpx;
		width: 300rpx;
	}

	.naming_price {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 110rpx;
		left: 365rpx;
	}

	.namingMenu {
		width: 675rpx;
		height: 232rpx;
		box-shadow: 0px 3rpx 10rpx 0rpx #E6E4E4;
		border-radius: 10rpx;
		margin: 0 auto;
		background: #fff;
		padding: 0 20rpx;
	}

	.namingMenu .namingMenu_title {
		font-size: 30rpx;
		color: #2C2C2C;
		margin-top: 17rpx;
	}

	.namingshop {
		margin: 24rpx 0;
	}

	.namingshop image {
		width: 209rpx;
		height: 139rpx;
	}

	.namingshop_chone {
		width: 420rpx;
		margin-left: 33rpx;
		font-size: 28rpx;
		color: #2C2C2C;

	}

	.namingshop_chone view {
		height: 85rpx;
		line-height: 45rpx;
	}

	.namingshop_chone text {
		font-size: 36rpx;
		color: #FF0000;
		display: block;
		margin-top: 10rpx;
	}

	.namingInfo {
		width: 675rpx;
		height: 1050rpx;
		box-shadow: 0px 3rpx 10rpx 0rpx #E6E4E4;
		border-radius: 10rpx;
		margin: 38rpx auto 0;
		padding: 0 20rpx;
	}

	.naminginfo_title {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
	}

	.naminginfo_title text {
		font-size: 26rpx;
		color: #B6B6B6;
	}

	.namingInfo input {
		width: 615rpx;
		height: 95rpx;
		border: 1px solid rgba(182, 182, 182, 1);
		border-radius: 10rpx;
		margin-bottom: 34rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
	}

	.uni-btn-v {
		margin-top: 80rpx;
	}

	.uni-btn-v button {
		width: 368rpx;
		height: 80rpx;
		background: rgba(252, 182, 70, 1);
		border-radius: 10rpx;
		margin: 0 auto;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	.remarks {
		width: 662rpx;
		line-height: 45rpx;
		color: #8A8A8A;
		font-size: 28rpx;
		margin: 80rpx auto 0;

	}
</style>
